<div
  cdkDrag
  cdkDragHandle
  cdkDragRootElement=".cdk-overlay-pane"
  class="d-flex align-items-center justify-content-between"
  style="cursor: move; margin-top: -24px; padding-top: 10px">
  <h1 mat-dialog-title>{{ 'general.FILTER_MATCH_ALL' | translate }}</h1>
  <button
    aria-label="Close icon button"
    class="d-flex align-items-center justify-content-center"
    mat-icon-button>
    <i (click)="dialogRef.close()" class="eos-icons">close</i>
  </button>
</div>
<hr class="fancy mt-1 mb-4 mx-0" />
<div mat-dialog-content>
  <form [formGroup]="form">
    <section class="row mx-0 align-items-center">
      <label class="col-2 font-weight-normal mb-0" for="date">{{'scan.PUBLISHED' | translate}}</label>
      <label class="sr-only" for="publishedType">{{'scan.PUBLISHED_TYPE' | translate}}</label>
      <mat-form-field appearance="standard" class="col-2 match">
        <mat-select formControlName="publishedType" id="publishedType">
          <mat-option [value]="'before'">{{'general.BEFORE' | translate}}</mat-option>
          <mat-option [value]="'after'">{{'general.AFTER' | translate}}</mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field appearance="standard" class="col pl-0">
        <input
          [matDatepicker]="picker"
          formControlName="dt"
          id="date"
          matInput />
        <mat-hint>MM/DD/YYYY</mat-hint>
        <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
    </section>
    <section class="row mx-0">
      <span class="d-block col-2">{{
        'cis.report.gridHeader.SCORED' | translate
      }}</span>
      <mat-radio-group
        aria-label="Scored"
        class="col row"
        formControlName="packageType">
        <mat-radio-button class="col" value="all">{{ 'setting.ALL' | translate}}</mat-radio-button>
        <mat-radio-button class="col" value="withFix"
          >{{ 'scan.WITH_FIX' | translate}}</mat-radio-button
        >
        <mat-radio-button class="col" value="withoutFix"
          >{{ 'scan.WITHOUT_FIX' | translate}}</mat-radio-button
        >
      </mat-radio-group>
    </section>
    <section class="row mx-0">
      <span class="d-block col-2">{{ 'profile.TITLE' | translate }}</span>
      <mat-radio-group
        aria-label="Profile"
        class="col row"
        formControlName="severityType">
        <mat-radio-button class="col" value="all">{{ 'setting.ALL' | translate}}</mat-radio-button>
        <mat-radio-button class="col" value="High">{{ 'enum.HIGH' | translate}}</mat-radio-button>
        <mat-radio-button class="col" value="Medium">{{ 'enum.MEDIUM' | translate}}</mat-radio-button>
      </mat-radio-group>
    </section>
    <section class="row mx-0 align-items-center">
      <label class="col-2 font-weight-normal mb-0" for="score_type"
        >{{'scan.report.gridHeader.SCORE' | translate}}</label
      >
      <label class="sr-only" for="score_type">{{ 'scan.report.gridHeader.SCORE' | translate}}</label>
      <mat-form-field appearance="standard" class="col-2 match">
        <mat-select formControlName="scoreType" id="score_type">
          <mat-option [value]="'V2'">V2</mat-option>
          <mat-option [value]="'V3'">V3</mat-option>
        </mat-select>
      </mat-form-field>
      <div class="custom-slider col pl-0">
        <ngx-slider
          *ngIf="form.controls.scoreType.value === 'V3'"
          [options]="options"
          formControlName="sliderV3"></ngx-slider>
        <ngx-slider
          *ngIf="form.controls.scoreType.value === 'V2'"
          [options]="options"
          formControlName="sliderV2"></ngx-slider>
      </div>
    </section>
    <section class="row mx-0 align-items-center">
      <label class="col-2 font-weight-normal mb-0" for="namespaceInput">{{
        'ldap.gridHeader.DOMAINS' | translate
      }}</label>
      <label class="sr-only" for="namespaceMatch">Match</label>
      <mat-form-field appearance="standard" class="col-2 match">
        <mat-select formControlName="matchType4Ns" id="namespaceMatch">
          <mat-option
            *ngFor="let matchType of matchTypes"
            [value]="matchType.id">
            {{ matchType.name }}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field appearance="standard" class="col pl-0">
        <mat-chip-list
          #chipList
          aria-label="Namespace selection"
          formControlName="selectedDomains"
          id="namespaceInput">
          <mat-chip
            (removed)="remove(domainChip)"
            *ngFor="let domainChip of form.controls.selectedDomains.value">
            {{ domainChip }}
            <button matChipRemove>
              <mat-icon>cancel</mat-icon>
            </button>
          </mat-chip>
          <input
            #namespaceInput
            (matChipInputTokenEnd)="add($event)"
            [formControl]="namespaceCtrl"
            [matAutocomplete]="auto"
            [matChipInputFor]="chipList"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
            [placeholder]="'ldap.ADD_DOMAIN' | translate" />
        </mat-chip-list>
        <mat-autocomplete
          #auto="matAutocomplete"
          (optionSelected)="selected($event)">
          <mat-option
            *ngFor="let domain of filteredDomains | async"
            [value]="domain">
            {{ domain }}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </section>
    <section class="row mx-0 align-items-center">
      <button [matMenuTriggerFor]="menu" class="col-2 d-flex" mat-button>
        {{ viewText }}&nbsp;<i class="eos-icons">arrow_drop_down</i>
      </button>
      <mat-menu #menu="matMenu">
        <button (click)="changeView(0)" mat-menu-item>
          <span>{{'admissionControl.names.SERVICE' | translate}}</span>
        </button>
        <button (click)="changeView(1)" mat-menu-item>
          <span>{{'admissionControl.names.IMAGE' | translate}}</span>
        </button>
        <button (click)="changeView(2)" mat-menu-item><span>{{'admissionControl.names.NODE' | translate}}</span></button>
        <button (click)="changeView(3)" mat-menu-item>
          <span>{{'admissionControl.names.CONTAINER' | translate}}</span>
        </button>
      </mat-menu>
      <ng-container [ngSwitch]="view">
        <div class="row col align-items-center">
          <ng-container *ngSwitchCase="FilterView.SERVICE">
            <label class="sr-only" for="serviceName">{{'admissionControl.names.SERVICE' | translate}}</label>
            <label class="sr-only" for="serviceMatch">Match</label>
            <mat-form-field
              appearance="standard"
              class="col-2 pr-0 match"
              formGroupName="matchTypes">
              <mat-select formControlName="Service" id="serviceMatch">
                <mat-option
                  *ngFor="let matchType of matchTypes"
                  [value]="matchType.id">
                  {{ matchType.name }}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field appearance="standard" class="col">
              <input formControlName="serviceName" id="serviceName" matInput />
            </mat-form-field>
          </ng-container>
          <ng-container *ngSwitchCase="FilterView.IMAGE">
            <label class="sr-only" for="imageName">{{'admissionControl.names.IMAGE' | translate}}</label>
            <label class="sr-only" for="imageMatch">Match</label>
            <mat-form-field
              appearance="standard"
              class="col-2 pr-0 match"
              formGroupName="matchTypes">
              <mat-select formControlName="Image" id="imageMatch">
                <mat-option
                  *ngFor="let matchType of matchTypes"
                  [value]="matchType.id">
                  {{ matchType.name }}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field appearance="standard" class="col">
              <input formControlName="imageName" id="imageName" matInput />
            </mat-form-field>
          </ng-container>
          <ng-container *ngSwitchCase="FilterView.NODE">
            <label class="sr-only" for="nodeName">{{'admissionControl.names.NODE' | translate}}</label>
            <label class="sr-only" for="nodeMatch">Match</label>
            <mat-form-field
              appearance="standard"
              class="col-2 pr-0 match"
              formGroupName="matchTypes">
              <mat-select formControlName="Node" id="nodeMatch">
                <mat-option
                  *ngFor="let matchType of matchTypes"
                  [value]="matchType.id">
                  {{ matchType.name }}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field appearance="standard" class="col">
              <input formControlName="nodeName" id="nodeName" matInput />
            </mat-form-field>
          </ng-container>
          <ng-container *ngSwitchCase="FilterView.CONTAINER">
            <label class="sr-only" for="containerName">{{'admissionControl.names.CONTAINER' | translate}}</label>
            <label class="sr-only" for="containerMatch">Match</label>
            <mat-form-field
              appearance="standard"
              class="col-2 pr-0 match"
              formGroupName="matchTypes">
              <mat-select formControlName="Container" id="containerMatch">
                <mat-option
                  *ngFor="let matchType of matchTypes"
                  [value]="matchType.id">
                  {{ matchType.name }}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field appearance="standard" class="col">
              <input
                formControlName="containerName"
                id="containerName"
                matInput />
            </mat-form-field>
          </ng-container>
        </div>
      </ng-container>
    </section>
  </form>
</div>
<div>
  <ng-container *ngIf="form.controls.serviceName.value">
    <span
      class="badge badge-secondary mb-1 mr-1 ml-0 d-inline-flex justify-content-center align-items-center"
      >Service
      {{ form.get(['matchTypes', 'Service'])?.value === 'equal' ? '=' : '~' }}
      {{ form.controls.serviceName.value }}
      <button (click)="clear(FilterView.SERVICE)" class="remove-button">
        <i class="eos-icons">close</i>
      </button></span
    >
  </ng-container>
  <ng-container *ngIf="form.controls.imageName.value">
    <span
      class="badge badge-secondary mb-1 mr-1 ml-0 d-inline-flex justify-content-center align-items-center"
      >Image
      {{ form.get(['matchTypes', 'Image'])?.value === 'equal' ? '=' : '~' }}
      {{ form.controls.imageName.value }}
      <button (click)="clear(FilterView.IMAGE)" class="remove-button">
        <i class="eos-icons">close</i>
      </button></span
    >
  </ng-container>
  <ng-container *ngIf="form.controls.nodeName.value">
    <span
      class="badge badge-secondary mb-1 mr-1 ml-0 d-inline-flex justify-content-center align-items-center"
      >Node
      {{ form.get(['matchTypes', 'Node'])?.value === 'equal' ? '=' : '~' }}
      {{ form.controls.nodeName.value }}
      <button (click)="clear(FilterView.NODE)" class="remove-button">
        <i class="eos-icons">close</i>
      </button></span
    >
  </ng-container>
  <ng-container *ngIf="form.controls.containerName.value">
    <span
      class="badge badge-secondary mb-1 mr-1 ml-0 d-inline-flex justify-content-center align-items-center"
      >Container
      {{
        form.get(['matchTypes', 'Container'])?.value === 'equal' ? '=' : '~'
      }}
      {{ form.controls.containerName.value }}
      <button (click)="clear(FilterView.CONTAINER)" class="remove-button">
        <i class="eos-icons">close</i>
      </button></span
    >
  </ng-container>
  <ng-container
    [ngTemplateOutletContext]="{
      max: form.controls.sliderV2.value[1],
      min: form.controls.sliderV2.value[0],
      type: 'V2'
    }"
    [ngTemplateOutlet]="slider">
  </ng-container>
  <ng-container
    [ngTemplateOutletContext]="{
      max: form.controls.sliderV3.value[1],
      min: form.controls.sliderV3.value[0],
      type: 'V3'
    }"
    [ngTemplateOutlet]="slider">
  </ng-container>
</div>
<p>{{ 'scan.CONDITION_HINT' | translate }}</p>
<div class="float-right" mat-dialog-actions>
  <button (click)="reset()" mat-button>{{ 'enum.RESET' | translate}}</button>
  <button
    [mat-dialog-close]="form.value"
    cdkFocusInitial
    color="primary"
    mat-raised-button>
    {{ 'enum.APPLY' | translate}}
  </button>
</div>
<ng-template #slider let-max="max" let-min="min" let-type="type">
  <span
    *ngIf="max < 10 || min > 0"
    class="badge badge-secondary mb-1 mr-1 ml-0 d-inline-flex justify-content-center align-items-center">
    <ng-container *ngIf="max < 10"> {{ type }} < {{ max }} </ng-container>
    <ng-container *ngIf="max < 10 && min > 0">&nbsp; &&nbsp;</ng-container>
    <ng-container *ngIf="min > 0"> {{ type }} > {{ min }} </ng-container>
    <button
      (click)="clear(type === 'V2' ? FilterView.V2 : FilterView.V3)"
      class="remove-button">
      <i class="eos-icons">close</i>
    </button></span
  >
</ng-template>
